<template>
    <div class="personal-infomation-page">
        <TopTitleExit title="Verify Account" :exit="routerExit"></TopTitleExit>
        <div class="body">
            <div class="warning-box" v-show="is_sumbit">
                <div class="icon" :style="`--icon: url(/icon/warn_icon/tips.svg)`"></div>
                <div class="warn-text">{{ status_map[user_auth_status] }}</div>
            </div>
            <div class="data-line">
                <div class="k not-null">First Name</div>
                <div class="v">
                    <input type="text" v-model="form.firstName" placeholder="Enter first name" />
                </div>
            </div>
            <div class="data-line">
                <div class="k">Middle Name (Optional)</div>
                <div class="v">
                    <input type="text" v-model="form.middleName" placeholder="Enter middle name" />
                </div>
            </div>
            <div class="data-line">
                <div class="k not-null">Last Name</div>
                <div class="v">
                    <input type="text" v-model="form.lastName" placeholder="Enter last name" />
                </div>
            </div>
            <div class="select-line">
                <div class="k not-null">Gender</div>
                <div class="v">
                    <div class="select-list">
                        <div class="select-item" v-for="item in gender_list" :key="item.id" @click="form.gender = item.value">
                            <div class="yuan">
                                <div class="quan" v-show="form.gender == item.value"></div>
                            </div>
                            <div class="text">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="data-line">
                <div class="k">Email Address</div>
                <div class="v">{{ userInfo.account }}</div>
            </div>
            <div class="data-line">
                <div class="k not-null">Telephone</div>
                <div class="v">
                    <input type="text" v-model="form.phone" placeholder="Enter telephone number" />
                </div>
            </div>
            <div class="data-line">
                <div class="k not-null">Country</div>
                <div class="v">
                    <input type="text" v-model="form.country" placeholder="Enter country" />
                </div>
            </div>
            <div class="data-line">
                <div class="k not-null">ID#</div>
                <div class="v">
                    <input type="text" v-model="form.cardNumber" placeholder="Enter ID#" />
                </div>
            </div>
            <div class="photo-line">
                <div class="k not-null">Front</div>
                <div class="v">
                    <div class="empty" v-show="!form.frontFileObj.file"></div>
                    <div class="img" v-show="form.frontFileObj.file" :style="`--img: url(${ form.frontFileObj.base64 })`"></div>
                    <input type="file" accept="image/*" @change="front_changeFile" />
                </div>
            </div>
            <div class="photo-line">
                <div class="k not-null">Back</div>
                <div class="v">
                    <div class="empty" v-show="!form.backFileObj.file"></div>
                    <div class="img" v-show="form.backFileObj.file" :style="`--img: url(${ form.backFileObj.base64 })`"></div>
                    <input type="file" accept="image/*" @change="back_changeFile" />
                </div>
            </div>
            <div class="btn-line" v-show="userInfo.authStatus == 0 || userInfo.authStatus == 3">
                <div class="btn" @click="submit">Submit</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import TopTitleExit from '@/components/common/TopTitleExit.vue';
import { routerExit } from '@/utils/jump.js';
import { userInfo, userService, user_auth_status, is_sumbit } from '@/service/user.js';
import { ref, reactive, onMounted } from 'vue';
import { loading, toast } from '@/service/status';
import { is_login } from '@/service/auth';

// 状态标志
const status_map = {
    0: 'The account verification is being reviewed.', // 等待审核
    1: 'Verification successfully',                   // 审核通过
    2: 'Verification failed',                         // 审核失败
};

const gender_list = [
    { id: 1, name: 'Male', value: 0 },
    { id: 2, name: 'Female', value: 1 },
];

const form = reactive({
    firstName: '',
    middleName: '',
    lastName: '',
    gender: 0,
    country: '',
    phone: '',
    cardNumber: '',
    frontFileObj: { file: null, base64: '' },
    backFileObj: { file: null, base64: '' },
});

function front_changeFile(e) {
    let file = e.target.files[0];
    if (!file) return;
    form.frontFileObj.file = file;
    const reader = new FileReader();
    reader.onload = function(e) {
        form.frontFileObj.base64 = e.target.result;
    };
    reader.onerror = function() {
        console.error('文件读取失败');
        form.frontFileObj.file = null;
    };
    reader.readAsDataURL(file);
}

function back_changeFile(e) {
    let file = e.target.files[0];
    if (!file) return;
    form.backFileObj.file = file;
    const reader = new FileReader();
    reader.onload = function(e) {
        form.backFileObj.base64 = e.target.result;
    };
    reader.onerror = function() {
        console.error('文件读取失败');
        form.backFileObj.file = null;
    };
    reader.readAsDataURL(file);
}

async function submit() {
    if (is_sumbit.value) {
        is_sumbit.value = false;
    } else {
        console.log('此时要提交的数据 - form', form);
        // 校验参数
        if (!form.firstName) {
            toast.toast(`Please input first name`, 2000);
            return ;
        }
        if (!form.lastName) {
            toast.toast(`Please input last name`, 2000);
            return ;
        }
        if (!form.phone) {
            toast.toast(`Please input telephone`, 2000);
            return ;
        }
        if (!form.country) {
            toast.toast(`Please input country`, 2000);
            return ;
        }
        if (!form.cardNumber) {
            toast.toast(`Please input cardNumber`, 2000);
            return ;
        }
        if (!form.frontFileObj.file) {
            toast.toast(`Please upload a front-facing photo of your ID card`, 2000);
            return ;
        }
        if (!form.backFileObj.file) {
            toast.toast(`Please upload a photo of the back of your ID card`, 2000);
            return ;
        }
        // 调用后端接口
        loading.value = true;
        await userService.authApply(form, (data) => {
            console.log('请求成功', data);
            toast.success('Submit successfully', 2000);
            // 修改页面状态
            is_sumbit.value = true;
            user_auth_status.value = 0;
        }, (res) => {
            console.log('请求失败', res);
            if (res.data.code == 401) {
                toast.toast('Please login', 2000);
            } else {
                toast.toast(`Submit failed ${ res.data.msg }`, 2000);
            }
        });
        loading.value = false;
    }
}

onMounted(async () => {
    // 暴力获取一次用户信息
    loading.value = true;
    await userService.getUserInfo();
    loading.value = false;
    // 判断是否已经登录
    if (!is_login.value) {
        toast.toast('Please login', 2000);
        return ;
    }
    // 打开加载框
    loading.value = true;
    // 请求看看用户是否有已经提交的个人信息 - 用于区分页面状态
    await userService.getAuthInfo((data) => {
        console.log('请求成功', data);
        is_sumbit.value = true;
        // form.firstName = data.firstName;
        // form.middleName = data.middleName;
        // form.lastName = data.lastName;
        // form.gender = data.gender;
        // form.country = data.country;
        // form.phone = data.phone;
        // form.cardNumber = data.cardNumber;
        user_auth_status.value = data.status;
    }, (res) => {
        console.log('请求失败', res);
        if (res.data.code == 401) {
            toast.toast('Please login', 2000);
        }
    });
    // 关闭加载框
    loading.value = false;
});

</script>

<style scoped lang="less">
.personal-infomation-page {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;

    .body {
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5vw;
        padding: 5vw;
        overflow-y: auto;

        .warning-box {
            box-sizing: border-box;
            width: 100%;
            padding: 5vw;
            background-color: var(--active-more-light-color);
            border-radius: 2vw;
            display: flex;
            gap: 2vw;

            .icon {
                --size: 5vw;
                --w: var(--size);
                --h: var(--size);
                font-size: calc(var(--size) * 0.8);
                text-align: center;
                line-height: var(--size);
                color: var(--active-color);
            }

            .warn-text {
                flex: 1;
                font-size: 3vw;
                color: var(--text-color);
            }
        }

        .avatar-line {
            width: 100%;
            display: flex;
            align-items: center;

            .icon {
                --size: 22vw;
                width: var(--size);
                height: var(--size);
                border-radius: 50%;
                background-color: var(--active-light-color);
                color: var(--active-color);
                font-size: 8vw;
                font-weight: 700;
                line-height: var(--size);
                text-align: center;
                margin: 0 auto;
            }
        }

        .data-line, .select-line, .photo-line {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 2vw;

            .k {
                width: fit-content;
                font-size: 3.5vw;
                font-weight: 500;

                &.not-null {
                    position: relative;

                    &::after {
                        content: '*';
                        font-size: 3vw;
                        color: red;
                        position: absolute;
                        top: 50%;
                        right: -2vw;
                        transform: translateY(-50%);
                    }
                }
            }
        }

        .data-line {
            .v {
                box-sizing: border-box;
                --h: 10vw;
                --pad: 3vw;
                width: 100%;
                height: var(--h);
                line-height: calc(var(--h) - var(--pad) * 2);
                padding: var(--pad);
                background-color: var(--bg-color);
                border: 0.1vw solid var(--border-color);
                border-radius: 2vw;
                font-size: 3vw;
                color: var(--text-color);

                input {
                    width: 100%;
                    height: 100%;
                    background-color: #00000000;
                    border: none;
                    outline: none;
                    color: var(--text-color);
                    font-size: 3vw;
                }
            }
        }

        .select-line {
            .v {
                box-sizing: border-box;
                --h: 10vw;
                width: 100%;
                height: var(--h);
                border-radius: 2vw;
                overflow: hidden;

                .select-list {
                    height: 100%;
                    display: flex;
                    gap: 5vw;

                    .select-item {
                        display: flex;
                        align-items: center;

                        .yuan {
                            --size: 10vw;
                            width: var(--size);
                            height: var(--size);
                            border-radius: 50%;
                            border: 0.5vw solid var(--border-color);
                            position: relative;
                            transform: scale(0.4);

                            .quan {
                                width: var(--size);
                                height: var(--size);
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%) scale(0.7);
                                background-color: var(--active-color);
                                border-radius: 50%;
                            }
                        }

                        .text {
                            line-height: var(--h);
                            font-size: 3vw;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .photo-line {
            .v {
                width: 100%;
                height: 30vw;
                --border-width: 0.5vw;
                --add-icon-size: 10vw;
                position: relative;

                .empty, .img, input {
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .empty {
                    border: var(--border-width) dashed var(--border-color);
                    border-radius: 3vw;

                    &::before, &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background: var(--border-color);
                    }

                    &::before {
                        width: var(--border-width);
                        height: var(--add-icon-size);
                    }

                    &::after {
                        width: var(--add-icon-size);
                        height: var(--border-width);
                    }
                }

                input {
                    opacity: 0;
                }
            }
        }

        .btn-line {
            width: 100%;

            .btn {
                width: 100%;
                height: 10vw;
                line-height: 10vw;
                background-color: var(--active-color);
                color: #fff;
                font-size: 4vw;
                text-align: center;
                border-radius: 2vw;
            }
        }
    }
}
</style>